import React from 'react'
import './index.css'
import { nanoid } from 'nanoid'
export default function Header({ todoList, setTodoList }) {
    const keyUpHandle = (e) => {
        if (e.keyCode !== 13) return
        const publishValue = e.target.value.trim()
        if (!publishValue) return alert('请输入有效内容')
        setTodoList([{ id: nanoid(), todo: publishValue, done: false }, ...todoList])
        e.target.value=''
    }
    return (
        <div className="todo-header">
            <input type="text" onKeyUp={keyUpHandle} placeholder="请输入你的任务名称，按回车键确认" />
        </div>
    )
}
